<div id="add-connection-modal" class="modal fade" role="dialog">
	<div id="add-connection-modal-dialog" class="modal-dialog">

		<!-- Modal content-->
		<div class="modal-content" id="add-connection-modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" id="close-add-connection-modal">&times;</button>
				<h2 class="modal-title">Import Data Source</h2>
				<div class="alert alert-success alert-dismissible" role="alert" ng-show="messages.success">
					<button type="button" ng-click="hideSuccessPanel()" class="close"><span aria-hidden="true">&times;</span></button>
					{{messages.success}}
				</div>
				<div class="alert alert-error alert-dismissible" role="alert" ng-show="messages.error">
					<button type="button" class="close" ng-click="hideErrorPanel()"><span aria-hidden="true">&times;</span></button>
					{{messages.error}}
				</div>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-2 tabs-list">
						<ul class="nav nav-tabs tabs-left">
							<li ng-repeat="(key, tabItem) in tabItems" ng-click="tabSelected(key)"
								ng-class="$first ? 'active' : ''">
								<a href="#{{tabItem.target}}" data-toggle="tab">
									<i class="{{tabItem.icon}} fa-2x"></i><br>
									<h4>{{tabItem.title}}</h4>
								</a>
							</li>
						</ul>
					</div>

					<div class="col-xs-10 tab-content col-xs-offset-2">
						<div class="tab-pane active" id="source-format-tab">
							<div class="box-header">
								<h3 class="box-title">Choose Data Source format</h3>
							</div>
							<div class="row">
								<div class="col-sm-10">
									<div class="col-md-4 col-sm-4" ng-repeat="(key, sourceFormat) in sourceTypeListWEndpoint">
										<div id="{{key}}" ng-click="setSourceFormat($event);" class="source-format-item" ng-class="{selected : key == inputs.sourceFormat, nologo: !sourceFormat.logo}">
											<img src="{{sourceFormat.logo}}" name="{{key}}" ng-show="sourceFormat.logo"/>
											<h4><span for="{{sourceFormat.key}}">{{sourceFormat.name}}</span></h4>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="source-info-tab">
							<div class="box-header">
								<h3 class="box-title">Source Information</h3>
							</div>
							<div class="box-body">
								<form name="source-info-form" role="form" id="source-info-form">
									<div class="form-group">
										<label for="sourceUrl" style="margin-bottom: 12px">Source URL*</label>
										<div class="alert alert-error alert-dismissible" role="alert" ng-show="messages.validateError">
											<button type="button" class="close" ng-click="hideValidateErrorPanel()"><span aria-hidden="true">&times;</span></button>
											{{messages.validateError}}
										</div>
										<br/>
										<input required="true" ng-model="inputs.url" ng-model-options='{ debounce: 1000 }' type="url" class="form-control" name="sourceUrl" placeholder="Public URL of the data source" style="" ng-change="validateSourceUrl();">
										<i class="validate-icon fa" ng-class="
										validateStatus == 'error' ? 'fa-exclamation-circle' :
										(validateStatus == 'waiting' ? 'fa-spinner fa-pulse' :
										(validateStatus == 'success' ? 'fa-check' : ''))"></i> 
									</div>
									<div class="form-group" ng-show="inputs.sourceFormat == 'geojson'">
										<label for="privacy">Source type</label><br/>
										<ol name="sourceType" class="nya-bs-select" ng-model="inputs.sourceType">
											<li nya-bs-option="value in sourceTypeList">
												<a>{{value.name}}</a>
											</li>
										</ol><br/>
										<h4 style="display: inline-block"><small>The type of the source that this data corresponds to.</small></h4>
									</div>
									<div class="form-group"><label>Advanced options <i id="toggle-show-data" class="fa" ng-class="showAdvancedOptions ? 'fa-caret-down' : 'fa-caret-right'" ng-click="showAdvancedOptions = !showAdvancedOptions"></i></i>
									</div>
									<div ng-show="showAdvancedOptions">
										<div class="form-group">
											<label for="harvestingFreq">Update frequency</label><br/>
											<h4 style="display: inline-block"><small>Check for updates every </small></h4>
											<ol name="harvestingFreq" class="nya-bs-select" ng-model="inputs.harvesting_freq">
												<li nya-bs-option="freq in harvestingFreqList">
													<a>{{freq.label}}</a>
												</li>
											</ol>
										</div>
										<div class="form-group">
											<label for="lifetime">Lifetime</label>
											<h4><small>Expiration date of the source. Leave blank for ever-lasting data.</small></h4>
											<div class="form-inline">
												<div class="input-group dropdown">
													<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
													<a class="dropdown-toggle my-toggle-select" id="datetimepicker1" role="button" data-toggle="dropdown" data-target="#" href="">
														<div class="input-append">
														<input type="text" class="form-control date-input" name="lifetime" ng-model="inputs.lifetime">
														</div>
													</a>
													<ul class="dropdown-menu" role="menu" aria-labelledby="datetimepicker1">
													<datetimepicker ng-model="inputs.lifetime" data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select', minView: 'day' }"></datetimepicker>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="tab-pane" id="mapping-rule-tab">
							<div class="box-header">
								<h3 class="box-title">Final step: Map your data to loklak</h3> <i id="toggle-show-data" ng-show="currentData" class="fa" ng-class="showCurrentData ? 'fa-caret-down' : 'fa-caret-right'" ng-click="showCurrentData = !showCurrentData"></i>
							</div>
							<div class="box-body">
								<div class="row" ng-show="showCurrentData">
								<pre>{{currentData | json }}</pre>
								</div>
								<div class="row" ng-show="currentLoklakFields == null && inputs.sourceFormat">
									<div class="col-md-8">
										<h4><small>This step is not required for data of type <code>{{sourceTypeList[inputs.sourceFormat]['name']}}.</code></small></h4>
									</div>
								</div>
								<div ng-hide="currentLoklakFields == null">
									<div class="row field-label">
										<div class="col-md-2"><h3>Loklak field</h3></div>
										<div class="col-md-4 col-md-offset-1"><h3>Custom field</h3></div>
									</div>
									<hr/>
									<div class="form-group" ng-repeat="(key, value) in currentLoklakFields">
										<div class="row" ng-class="$last ? 'last' : ''" >
											<div class="col-md-2">
												<span name="loklakField" class="loklak-field">{{value.label}}</span>
											</div>
											<div class="col-md-1" style="text-align: center">
												<i class="fa fa-arrow-left"></i>
											</div>
											<div class="col-md-4">
												<input type="text" class="form-control input-sm custom-field" ng-model="inputs.mapRules[key][0]"/>
											</div>
											<div class="col-md-4 field-preview" ng-show="accessDataField(key)">
												<pre>{{accessDataField(key) | json }}</pre>
											</div>
										</div>
										<div class="row">
											<div class="col-md-7">
												<h4><small>{{value.help}}</small></h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
                <div style="float:left;" class="col-xs-offset-2">
                    <a id="next-step" ng-show="showNext" ng-click="proceed()" type="button" class="btn btn-loklak-blue">Next Step</a>
                    <a ng-hide="showNext" ng-click="submit()" type="submit" class="btn btn-loklak-blue" ng-click="">Submit</a>
                    <span ng-show="" style="color:red;" class="ng-hide">Enter an event name and your event's main hashtag</span>
                </div>
            </div>
		</div>
	</div>
</div>
